<template>
  <lay-container fluid="true" class="user-box">
    <lay-card>
      <lay-form style="margin-top: 10px">
        <lay-row>
          <lay-col :md="5">
            <lay-form-item label="账号" label-width="80">
              <lay-input
                v-model="userForm.account"
                placeholder="请输入"
                size="sm"
                :allow-clear="true"
                style="width: 98%"
              ></lay-input>
            </lay-form-item>
          </lay-col>
          <lay-col :md="5">
            <lay-form-item label="登录名" label-width="80">
              <lay-input
                v-model="userForm.loginName"
                placeholder="请输入"
                size="sm"
                :allow-clear="true"
                style="width: 98%"
              ></lay-input>
            </lay-form-item>
          </lay-col>
          <lay-col :md="5">
            <lay-form-item label-width="20">
              <lay-button
                style="margin-left: 20px"
                type="primary"
                size="sm"
                @click="toSearch"
              >
                查询
              </lay-button>
              <lay-button size="sm" @click="toReset"> 重置 </lay-button>
            </lay-form-item>
          </lay-col>
        </lay-row>
      </lay-form>
    </lay-card>
    <!-- table -->
    <div class="table-box">
      <lay-table
        :page="page"
        :height="'84%'"
        :columns="columns"
        :loading="loading"
        :default-toolbar="true"
        :data-source="dataSource"
        v-model:selected-keys="selectedKeys"
        @change="change"
      >
        <template v-slot:toolbar>
          <lay-button size="sm" type="primary" @click="changeVisible('新增')">
            <lay-icon class="layui-icon-addition"></lay-icon>
            新增</lay-button
          >
          <lay-button size="sm" @click="toRemove">
            <lay-icon class="layui-icon-delete"></lay-icon>
            删除
          </lay-button>
        </template>
        <template v-slot:operator="{ row }">
          <lay-button
            size="xs"
            type="primary"
            @click="changeVisible('编辑', row)"
            >编辑</lay-button
          >
          <lay-popconfirm
            content="确定要删除此用户吗?"
            @confirm="confirm"
            @cancel="cancel"
          >
            <lay-button size="xs" border="red" border-style="dashed"
              >删除</lay-button
            >
          </lay-popconfirm>
        </template>
      </lay-table>
    </div>

    <lay-layer v-model="visible" :title="title" :area="['500px', '550px']">
      <div style="padding: 20px 60px 20px 20px;">
        <lay-form :model="userFormModel" ref="userFormRef">
					<lay-form-item label="账号" prop="account" required>
            <lay-input v-model="userFormModel.account" :disabled="disabled"></lay-input>
          </lay-form-item>
          <lay-form-item label="登录名" prop="loginName">
            <lay-input v-model="userFormModel.loginName"></lay-input>
          </lay-form-item>
					<lay-form-item label="姓名" prop="name">
            <lay-input v-model="userFormModel.name"></lay-input>
          </lay-form-item>
					<lay-form-item label="电话" prop="phone" required>
            <lay-input v-model="userFormModel.tel" :disabled="disabled"></lay-input>
          </lay-form-item>
          <lay-form-item label="年龄" prop="age">
            <lay-input v-model="userFormModel.age"></lay-input>
          </lay-form-item>
          <lay-form-item label="性别" prop="sex">
            <lay-select v-model="userFormModel.sex" style="width: 100%">
              <lay-select-option value="男" label="男"></lay-select-option>
              <lay-select-option value="女" label="女"></lay-select-option>
            </lay-select>
          </lay-form-item>
          <lay-form-item label="email" prop="email">
            <lay-input v-model="userFormModel.email"></lay-input>
          </lay-form-item>
        </lay-form>
        <div style="width: 100%; text-align: center">
          <lay-button size="sm" type="primary" @click="toSubmit"
            >保存</lay-button
          >
          <lay-button size="sm" @click="toCancel">取消</lay-button>
        </div>
      </div>
    </lay-layer>
  </lay-container>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { getPageData,userSave } from '../../../api/module/user'
import { layer } from '@layui/layui-vue'
const userForm = ref({
  account: '',
  loginName: ''
})

function toReset() {
  userForm.value = {
    account: '',
    loginName: ''
  }
	change(page)
}

function toSearch() {
  page.current = 1
  change(page)
}

const loading = ref(false)
const disabled = ref(false)
const selectedKeys = ref<string[]>([])
const page = reactive({ current: 1, limit: 10, total: 12 })
const columns = ref([
	{ type: 'number', title:"#", fixed: 'left'},
  { title: '选项', width: '40px', type: 'checkbox'},
  { title: '账号', width: '100px', key: 'account'},
  { title: '登录名', width: '100px', key: 'loginName'},
  { title: '姓名', width: '100px', key: 'name'},
  { title: '电话', width: '120px', key: 'tel'},
  { title: '年龄', width: '80px', key: 'age'},
  { title: '性别', width: '80px', key: 'sex'},
  { title: '邮箱', width: '260px', key: 'email'},
  {
    title: '操作',
    width: '120px',
    customSlot: 'operator',
    key: 'operator',
    fixed: 'right'
  }
])
const change = (page: any) => {
  loading.value = true
  setTimeout(() => {
		getPageData(userForm.value).then(({ data, code, msg }) => {  
			if (code === 200) {
				dataSource.value = data;
				dataSource.value.forEach((item: any) => {
					item.tel = item.phone.replace(/(\d{3})\d*(\d{4})/,"$1****$2");
				});
				page.total = data.length;
			} else {  
				layer.msg(msg, { icon: 2 });  
			}  
		});
    loading.value = false
  }, 1000)
}

onMounted(() =>{
	change(page);
})

const dataSource = ref()
const userFormModel = ref<any>({})
const userFormRef = ref()
const visible = ref(false)
const title = ref('新增')
const changeVisible = (text: any, row?: any) => {
  title.value = text
  if (row) {
		disabled.value = true
    let info = JSON.parse(JSON.stringify(row))
    userFormModel.value = info
  } else {
		disabled.value = false
    userFormModel.value = {}
  }
  visible.value = !visible.value
}
function toRemove() {
  if (selectedKeys.value.length == 0) {
    layer.msg('您未选择数据，请先选择要删除的数据', { icon: 3, time: 2000 })
    return
  }
  layer.confirm('您将删除所有选中的数据？', {
    title: '提示',
    btn: [
      {
        text: '确定',
        callback: (id: any) => {
          layer.msg('您已成功删除')
          layer.close(id)
        }
      },
      {
        text: '取消',
        callback: (id: any) => {
          layer.msg('您已取消操作')
          layer.close(id)
        }
      }
    ]
  })
}
function toSubmit() {
	userFormRef.value.validate()
	userSave(userFormModel.value).then(({code,msg}) =>{
			if(code == 200){
				layer.msg('保存成功！', { icon: 1 }, async () => {
					visible.value = false
					change(page);
				})
			}else{
				layer.msg(msg, { icon: 2 })
				change(page);
			}
	})
}
function toCancel() {
  visible.value = false
}
function confirm() {
  layer.msg('您已成功删除')
}
function cancel() {
  layer.msg('您已取消操作')
}
</script>

<style scoped>
.user-box {
  height: calc(100vh - 110px);
  margin-top: 10px;
  box-sizing: border-box;
  overflow: hidden;
}

.top-search {
  margin-top: 10px;
  padding: 10px;
  height: 40px;
  border-radius: 4px;
  background-color: #fff;
}

.table-box {
  margin-top: 10px;
  padding: 10px;
  height: 700px;
  width: 100%;
  border-radius: 4px;
  box-sizing: border-box;
  background-color: #fff;
}

.search-input {
  display: inline-block;
  width: 98%;
  margin-right: 10px;
}

.isChecked {
  display: inline-block;
  background-color: #e8f1ff;
  color: red;
}
</style>